<template>
  <div
    class="bar-sticky"
    :style="{ borderBottom: '1rpx solid ' + navigationBarStyle.borderColor }"
  >
    <div
      class="bar-wrap"
      :style="{ height: 'calc( ' + navHeight + 'px + 44px )' }"
    >
      <image
        v-if="navigationBarStyle.bgImg"
        :src="navigationBarStyle.bgImg"
        style="width: 100vw"
        mode="widthFix"
      ></image>
    </div>
    <div
      class="status-line"
      :style="{
        height: navHeight + 'px',
        background: navigationBarStyle.background,
      }"
    ></div>
    <div
      class="bar-line"
      :style="{ background: navigationBarStyle.background }"
    >
      <div
        class="bar-line container-in"
        :style="{ background: navigationBarStyle.background }"
      >
        <div class="bar-font bar-content" v-if="!custom">
          <div class="icon-fanhui bar-back" @click="leftBtn">
            <image
              :src="getImgSrc('/home/icon_home_my@2x.png')"
              class="fanhui"
              mode=""
            ></image>
          </div>
          <div
            class="bar-title"
            :style="{
              color:
                navigationBarStyle.color == 'white' ? '#ffffff' : '#000000',
            }"
          >
            {{ navigationBarStyle.iconText }}
          </div>
          <div
            v-if="platform != 'MP-WEIXIN'"
            class="icon-fanhui bar-back1"
            @click="rightBtn"
          >
            <image
              :src="getImgSrc('/home/icon_news_black@2x.png')"
              class="fanhui"
              mode=""
              @tap="message"
            ></image>
          </div>
        </div>
        <div class="bar-font container-in" v-else>
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>
 <script>
import { getPlatform } from "@/common/util.js";
export default {
  props: {
    custom: {
      type: Boolean,
      default: false,
    }, //自定义头部，否则沿用原生的头部样式

    navigationBarStyle: {
      type: Object,
      default: function () {
        return {
          bgImg: "",
          background: "",
          borderColor: "transparent",
          color: "white",
          iconText: "", //导航栏文字
        };
      },
    }, //原生头部自定义样式
  },
  data() {
    return {
      navHeight: getApp().globalData.navHeight, //状态栏高度
      navImgHeight: getApp().globalData.navHeight + 44, //状态栏高度
      showBack: true, //是否显示回退图标，默认显示
      showHome: false, //是否显示返回首页
      platform: getPlatform(),
    };
  },
  mounted() {
    let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
    let curRoute = routes[routes.length - 1].route; //获取当前页面路由
    let curParam = routes[routes.length - 1].options; //获取路由参数
    if (
      curRoute == "pages/index/index" ||
      curRoute == "pages/mine/index" ||
      curRoute == "pages/mtask/index"
    ) {
      this.showBack = false;
    }
    if (routes.length == 1) {
      if (
        curRoute != "pages/index/index" &&
        curRoute != "pages/mine/index" &&
        curRoute != "pages/mtask/index"
      ) {
        this.showHome = true;
      }
    }
  },
  methods: {
    back() {
      let historyNavigate = uni.getStorageSync("historyNavigate");
      if (historyNavigate) {
        uni.navigateTo({
          url: historyNavigate,
        });
        uni.setStorageSync("historyNavigate", "");
      } else {
        uni.navigateBack("OBJECT");
      }
    },
    message() {
      uni.navigateTo({ url: "/pages/sys/user/message" });
    },
    leftBtn() {
      this.$emit("leftHandle", 1);
    },
    rightBtn() {
      this.$emit("rightHandle", 1);
    },
  },
};
</script> 
  
 <style lang="scss">
/*正中*/
.bar-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.bar-wrap {
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
//导航栏吸顶效果
.bar-sticky {
  width: 100vw;
  position: fixed;
  position: -webkit-sticky;
  top: 0;
  left: 0;
  z-index: 1001;
  height: 0;
}
.status-line {
  position: relative;
  z-index: 1;
}
/*垂直居中*/
.container-in {
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  height: 44px;
}

.bar-line {
  position: relative;
  z-index: 1;
  height: 44px; //导航栏高度

  .bar-back {
    font-size: 52upx !important;
    position: absolute;
    left: 30upx;
  }
  .bar-back1 {
    font-size: 52upx !important;
    position: absolute;
    right: 30upx;
  }

  .bar-title {
    font-size: 32rpx;
  }
}
.fanhui {
  width: 40rpx;
  height: 40rpx;
}
</style>